<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
   通过 Prop 向子组件传递数据
   1.为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：
   2.当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property     类似 data中编写的属性

  Prop 的大小写 (camelCase vs kebab-case)
  1.HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。
    这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
  2. 重申一次，如果你使用字符串模板，那么这个限制就不存在了


-->
<div id="app">
<!--    使用组件标签时 向组件内部传递参数 可以通过添加组件标签属性实现  属性的名字需要和props列表中保持一致-->
    <Blog blog-title='这是第一篇博客的标题' ></Blog>
<!--    <Blog :title='title' ></Blog>-->
<!--      <Blog v-for="(t,index) in titles" :title="t"  :key="index"></Blog>-->
</div>

<script>

    // 定义博客组件
    let blog = {
        template: '<h3>{{blogTitle}}</h3>',
        data: function (){
            return {
                // title:'这是第二篇博客的标题'
            }
        },
        // props: ['blogTitle'], // 接受组件标签中传递的参数
        props:{
            // 'blogTitle':String
            'blogTitle':{
                type:String,   //  参数类型
                required:true,  //  表示必要参数
                default: "hello"
            }
        },
        mounted(){
            console.log(this)
        }
    }

    let vm = new Vue({
        el: '#app',
        // template: `
        //   <div>
        //     <blog blogTitle='这是第一篇博客的标题' ></blog>
        //   </div>
        // `,
        data: {
            title:"这是第一篇博客的标题"
            // titles:[
            //     "这是第一篇博客的标题",
            //     "这是第二篇博客的标题"
            // ]
        },
        methods: {},
        components: {
            blog
        }
    })
</script>

</body>
</html>